import React, { useEffect, useRef } from 'react';
import { AUTO, Game, Types } from 'phaser';

const styles = {
  display: 'flex',
  justifyContent: 'center',
};

interface Props {
  config: Types.Core.GameConfig;
}

const GameWrapper: React.FC<Props> = props => {
  const ref = useRef(null);
  const game = useRef<Game>();

  useEffect(() => {
    const { config } = props;
    game.current = new Game({
      parent: ref.current || '',
      type: AUTO,
      ...config,
    });
    return () => game.current && game.current.destroy(true);
  }, []);

  return <div ref={ref} style={styles} />;
};

export default GameWrapper;
